<template>
  <div class="lhc">
    <MainHeader class="layout-home-header"/>
    <MainLeft class="layout-home-left"/>

    <div class="mh layout-m-header">
      <div v-swiper:mhSwiper="mhSwiperOption">
        <div class="swiper-wrapper">
          <div :class=" categoryActive == index ? 'swiper-slide mh-itme mh-item-active':'swiper-slide mh-itme' "
               v-for="(category, index ) in this.$store.state.content.categoryData">
            {{category.name}}
          </div>
          <div class="swiper-slide mh-itme">
            &nbsp;
          </div>
        </div>
      </div>
    </div>
    <div class="m-search">
      <img @click="toSearch" src="/icons/search.png"/>
    </div>
    <div class="index-swiper">
      <div v-swiper:sloganSwiper="sloganSwiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(banner, index ) in banners">
            <img :src="banner"/>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
    </div>
    <div class="content-wrap layout-m-content">
      <div v-swiper:contentSwiper="contentSwiperOption">
        <div class="swiper-wrapper">

          <div class="swiper-slide content-item'" v-for="item in this.$store.state.content.categoryData ">
            <Index class="content-container"/>
          </div>
        </div>
      </div>
    </div>
    <nuxt class="layout-home-content"/>
    <MainRight class="layout-home-right"/>
    <MobileBottom class="layout-m-bottom"/>
  </div>
</template>
<script>
  import MainHeader from '~/components/layout/main-header.vue'
  import MainLeft from '~/components/layout/main-left.vue'
  import MainRight from '~/components/layout/main-right.vue'
  import MobileBottom from '~/components/layout/mobile-bottom.vue'
  import Index from '~/components/content/index.vue'
  export default {
    data () {
      let that = this
      return {
        banners: [
          '/banner/11.jpg',
          '/banner/22.jpg',
          '/banner/33.jpg'
        ],
        categoryActive: 0,
        observer: true,
        contentSwiperOption: {
          onSlideChangeEnd: swiper => {
            that.mhSwiper.slideTo(swiper.realIndex)
            that.categoryActive = swiper.realIndex
            console.log(that.$store.state.content.categoryData[swiper.realIndex])
            that.swiperData(that.$store.state.content.categoryData[swiper.realIndex].sort)
          }
        },
        sloganSwiperOption: {
          autoplay: 1500,
          loop: true,
          pagination: '.swiper-pagination',
          onTap: swiper => {
            that.sloganSwiper.slideTo(swiper.realIndex)
          }
        },
        mhSwiperOption: {
          slidesPerView: 7,
          onTap: swiper => {
            that.categoryActive = swiper.clickedIndex
            that.contentSwiper.slideTo(swiper.clickedIndex + 1)
            that.swiperData(that.$store.state.content.categoryData[swiper.clickedIndex].sort)
          }
        }
      }
    },
    components: {
      MainHeader,
      MainLeft,
      MainRight,
      MobileBottom,
      Index
    },
    beforeCreate: function () {
    },
    mounted () {
      // 监控浏览器窗口变化，确定是否选择pc还是移动模式
      window.addEventListener('resize', this.resize)
      this.resize()
    },
    methods: {
      resize () {
        this.$store.dispatch('setResize', {
          resize: document.documentElement.clientWidth
        })
      },
      swiperData (_category) {
        // 移动端加载页面数据
        this.$store.dispatch('content/getContentData', {
          category: _category === 1 ? 0 : _category, oper: 'init'
        })
      },
      toSearch () {
        this.$router.push({name: 'search'})
      }
    }
  }
</script>
<style>

  .mh-item-active {
    font-size: 1.3em !important;
    font-weight: 700;
    color: #ffffff;
  }

  .swiper-pagination-bullet {
    background-color: #13BA31;
  }

  .m-search {
    position: fixed;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    z-index: 2;
    text-align: center;
    background-color: #13BA31;
    display: none;
  }

  .m-search > img {
    height: 20px;
    width: 20px;
    margin-top: 10px;
  }

  .mh-itme {
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 1.25em;
    cursor: pointer;
    color: #f4f4f4;
  }

  .content-wrap {
    height: 100%;
    margin-top: -45px;
  }

  .mh .swiper-container {
    background-color: #13BA31;
  }

  .layout-home-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .layout-home-left, .layout-home-right, .index-swiper {
    top: 65px;
  }

  .index-swiper {
    position: relative;
    overflow: hidden;
  }

  .index-swiper .swiper-slide {
    height: 260px;
    background-color: rgba(204, 28, 10, 0.02);
    position: relative;
  }

  .layout-m-content {
    top: 120px;
    z-index: 1;
    position: relative;
    display: none;
  }

  .layout-home-left {
    position: fixed;
  }

  .layout-home-right {
    position: absolute;
  }

  .layout-m-bottom, .layout-m-header {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    background-color: #ffffff;
    width: 100%;
  }

  .layout-m-bottom {
    bottom: 0;
    height: 50px;
  }

  .layout-m-header {
    top: 0;
    height: 40px;
  }

  .layout-home-content {
    top: 320px;
    z-index: 1;
    position: absolute;
  }

  @media all and (min-width: 1200px) {
    .layout-home-left {
      width: 120px;
      left: calc(100% - (100% - 1200px)/2);
    }

    .layout-home-content, .layout-m-content, .index-swiper {
      width: 750px;
      left: calc(100% - (100% - 1200px)/2 + 120px);
    }

    .layout-home-right {
      width: 330px;
      left: calc(100% - (100% - 1200px)/2 + 870px);
    }

  }

  /* 中小型笔记本或大平板 laptop */
  @media all and (min-width: 767px) and (max-width: 1200px) {
    .layout-home-left {
      width: 8%;
      left: 4%;
    }

    .layout-home-content, .layout-m-content, .index-swiper {
      width: 58.5%;
      left: 12%;
    }

    .layout-home-right {
      width: 25%;
      left: 71%;
    }

  }

  @media all and (max-width: 766px) {
    .layout-home-content, .layout-home-left, .layout-home-header, .layout-home-right {
      display: none;
    }

    .layout-m-bottom, .layout-m-header, .m-search {
      display: block;
    }

    .layout-m-content {
      position: static;
      margin-bottom: 50px;
      margin-top: 65px;
      display: block;
    }

    .index-swiper {
      margin-top: -25px;
    }

    .index-swiper .swiper-slide {
      position: static;
      height: 150px;
    }

  }


</style>
